<template>
  <drag-modal
    title="查看"
    :width="550"
    :visible="visible"
    :destroyOnClose="true"
    :maskClosable="false"
    @cancel="cancel"
  >
    <a-spin :spinning="loading">
      <a-form-model :model="form" ref="form" :label-col="{span: 5}" :wrapperCol="{span: 16, offset: 1}">
        <div class="fold">
          <a-form-model-item
            label="用户名"
            prop="username"
          >
            <span>{{form.username}}</span>
          </a-form-model-item>
          <a-form-model-item
            label="昵称"
            prop="nickname"
          >
            <span>{{form.nickname}}</span>
          </a-form-model-item>
          <a-form-model-item
            label="性别"
            prop="gender"
          >
            <span>{{form.gender | dictFilter(dict.gender)}}</span>
          </a-form-model-item>
          <a-form-model-item
            label="联系电话"
            prop="phone"
          >
            <span>{{form.phone}}</span>
          </a-form-model-item>
          <a-form-model-item
            label="电子邮件"
            prop="email"
          >
            <span>{{form.email}}</span>
          </a-form-model-item>
          <a-form-model-item
            label="所属机构"
            prop="organizationId"
          >
            <span>{{form.organizationName}}</span>
          </a-form-model-item>
          <a-form-model-item
            label="拥有角色"
            prop="role"
          >
            <span>{{form.roleNames}}</span>
          </a-form-model-item>
          <a-form-model-item
            label="状态"
            prop="status"
          >
            <span>{{form.status | dictFilter(dict.status)}}</span>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-spin>
    <template slot="footer">
      <a-button @click="cancel">关闭</a-button>
    </template>
  </drag-modal>
</template>

<script>
import {userService} from '@/services'
  
export default {
  name: 'QueryModal',
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      organizationTreeData: [],
      roleSelectData: [],
      form: {
        username: undefined,
        nickname: undefined,
        gender: undefined,
        phone: undefined,
        email: undefined,
        status: undefined,
        organizationId: undefined,
        organizationName: undefined,
        roleNames: undefined,
        role: []
      },
      dict: {
        gender: [],
        status: []
      }
    }
  },
  filters: {
    dictFilter: (val, dictList) => {
      const dict = dictList.find(item => item.value == val)
      return dict ? dict.title : '未知'
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    queryAction(val) {
      this.loading = true
        const params = {
          id: val
        }
        userService.query(JSON.stringify(params)).then(res => {
          const result = res.data
          if (result.code === 200) {
            this.form = result.data
          }
        }).finally(this.loading = false)
    },
    queryOrganizationTreeAction(val) {
      this.loading = true
      this.form.organizationId = val
      userService.queryOrganizationTree().then(res => {
        const result = res.data
        if (result.code === 200) {
          this.organizationTreeData = result.data
        }
      }).finally(this.loading = false)
    },
    queryRoleSelectAction(val) {
      this.loading = true
      userService.queryRoleList().then(res => {
        const result = res.data
        if (result.code === 200) {
          this.roleSelectData = result.data
        }
      }).finally(this.loading = false)
    }
  },
  mounted() {
    this.getDict(JSON.stringify({code: 'SYS_GENDER'})).then(res => this.dict.gender = res.data.data)
    this.getDict(JSON.stringify({code: 'SYS_STATUS'})).then(res => this.dict.status = res.data.data)
  }
}
</script>
